<template>
  <div class=" lexC positionR">
    <div style="position: relative;">
      <ul class="flex font_s20 textC JustifyContentC tab_ul"
          style="margin: 0 5rem 1rem 5rem;display: none">
        <li class="flex1 font_s20"
            :class="{active:isActive===1}"
            @click="toggleJgdDetailView(1)">
          <div>运营管理</div>
          <div class="font_s42"
               style="color: #56BAEE;">{{yxglList.length}}</div>
        </li>
        <li class="flex1 font_s20"
            :class="{active:isActive===2}"
            @click="toggleJgdDetailView(2)">
          <div>消防安全</div>
          <div class="font_s42"
               style="color: #F0EB6D;">{{xfaqList.length}}</div>
        </li>
        <li class="flex1 font_s20"
            :class="{active:isActive===3}"
            @click="toggleJgdDetailView(3)">
          <div>设施设备</div>
          <div class="font_s42"
               style="color: #ED9091;">{{sssbList.length}}</div>
        </li>
        <li class="flex1 font_s20"
            :class="{active:isActive===4}"
            @click="toggleJgdDetailView(4)">
          <div>烟花爆竹管控</div>
          <div class="font_s42"
               style="color: #ABEFA9;">{{yhbzList.length}}</div>
        </li>
      </ul>
      <ul class="flex tb_list font_s20"
          style="margin: 0 2rem; background-color: #143694; background-position: 100% 100%;">
        <li class="flex1">序号</li>
        <li class="flex3">二级管理要素</li>
        <li class="flex3">风险点</li>
        <li class="flex3">平台模块</li>
        <li class="flex3">检查类型</li>
        <li class="flex3">检查设计单位类型</li>
        <li class="flex2">扣分值</li>
        <li class="flex2">风险级别</li>
        <li class="flex2">处理类别</li>
      </ul>
    </div>
    <div style="height: 56vh; margin: 0 2rem 1rem 2rem;"
         class="superviseList font_s18">
      <div style="color: #8BF5FF;">
        <ul class="flex tb_list"
            v-for="(item, index) in dataList"
            :key="index"
            :class="{evenbg:index%2==1}" >
          <li class="flex1">
            <div class="bg_serial_num c_num">{{ index + 1 }}</div>
          </li>
          <li class="flex3 c_txt">{{item.glys}}</li>
          <li class="flex3" :class="[item.type === 2 ? 'c_num':'c_txt']">{{item.fxd}}</li>
          <li class="flex3" :class="[item.type === 2 ? 'c_num':'c_txt']">{{item.pt}}</li>
          <li class="flex3 c_num">{{item.jclx}}</li>
          <li class="flex3 c_num">{{item.dwlx}}</li>
          <li class="flex2 c_num">{{item.kfz}}</li>
          <li class="flex2 c_txt">{{item.fxjb}}</li>
          <li class="flex2 c_txt">{{item.cllb}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { standardViewData } from '../../../assets/json/StandardViewList'
export default {
  name: 'FXStandardViewModel',
  data () {
    return {
      isActive: 1,
      dataList: [],
      dataList2: [
        { 'fxpg': '未持有合法的、有效的《工商营业执照》和《殡葬服务证》', 'gjc': '合法经营', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未与客户签订服务（合同）协议，或者（合同）协议不符合规定', 'gjc': '合同、签约', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未按照国家有关标准和规定开展殡葬服务', 'gjc': '国家标准、规定', 'sfjyypfjq': '是', 'fxfz': '4' },
        { 'fxpg': '向民政部门隐瞒有关情况，提供虚假材料或者拒绝提供反映其活动情况真实材料', 'gjc': '虚报、瞒报', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '利用殡葬机构的房屋、场地、设施开展殡葬服务宗旨无关活动', 'gjc': '超范围', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '侵犯群众合法权益行为', 'gjc': '法律、法规', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '擅自暂停或终止殡葬服务', 'gjc': '合同、签约', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '全年内连续2次及以上信访举报或媒体曝光等严重问题，并被查实', 'gjc': '信访举报', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未设立清明（冬至）祭扫高峰接待工作领导小组，制定接待工作方案', 'gjc': '方案', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未建立清明（冬至）突发事件处置预案', 'gjc': '预案', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未对殡葬设施日常管理、安全制度及服务对象工作等建立业务档案（电子或纸质）', 'gjc': '档案', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '公墓内行人、车辆集散地，园区内的道路主次未分明', 'gjc': '道路 分明', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内整体环境未达到整洁、物品未堆放整齐', 'gjc': '整洁', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '公墓内绿化植物未定期修剪、养护，存在安全隐患', 'gjc': '安全', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内未符合环保要求，排水不畅通，未达到卫生标准，未保证高峰时生活用水', 'gjc': '环保', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内路面不平整，坑洼、并有引起道路湿滑的苔藓等植被', 'gjc': '路面平整', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内未设有应急广播', 'gjc': '广播设施', 'sfjyypfjq': '是', 'fxfz': '2' }
      ],
      yxglList: [
        { 'fxpg': '未持有合法的、有效的《工商营业执照》和《殡葬服务证》', 'gjc': '合法经营', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未与客户签订服务（合同）协议，或者（合同）协议不符合规定', 'gjc': '合同、签约', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未按照国家有关标准和规定开展殡葬服务', 'gjc': '国家标准、规定', 'sfjyypfjq': '是', 'fxfz': '4' },
        { 'fxpg': '向民政部门隐瞒有关情况，提供虚假材料或者拒绝提供反映其活动情况真实材料', 'gjc': '虚报、瞒报', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '利用殡葬机构的房屋、场地、设施开展殡葬服务宗旨无关活动', 'gjc': '超范围', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '侵犯群众合法权益行为', 'gjc': '法律、法规', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '擅自暂停或终止殡葬服务', 'gjc': '合同、签约', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '全年内连续2次及以上信访举报或媒体曝光等严重问题，并被查实', 'gjc': '信访举报', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未设立清明（冬至）祭扫高峰接待工作领导小组，制定接待工作方案', 'gjc': '方案', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未建立清明（冬至）突发事件处置预案', 'gjc': '预案', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未对殡葬设施日常管理、安全制度及服务对象工作等建立业务档案（电子或纸质）', 'gjc': '档案', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '公墓内行人、车辆集散地，园区内的道路主次未分明', 'gjc': '道路 分明', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内整体环境未达到整洁、物品未堆放整齐', 'gjc': '整洁', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '公墓内绿化植物未定期修剪、养护，存在安全隐患', 'gjc': '安全', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内未符合环保要求，排水不畅通，未达到卫生标准，未保证高峰时生活用水', 'gjc': '环保', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内路面不平整，坑洼、并有引起道路湿滑的苔藓等植被', 'gjc': '路面平整', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '墓区内未设有应急广播', 'gjc': '广播设施', 'sfjyypfjq': '是', 'fxfz': '2' }
      ],
      xfaqList: [
        { 'fxpg': '未开展安全隐患排查和薄弱环节的自查自纠', 'gjc': '隐患自查', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未组织开展至少每月防火检查，每日一次防火巡查', 'gjc': '检查', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未每半年至少开展一次消防演练', 'gjc': '演练', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未制定消防安全、特种设备设施齐全、突发事件等相关管理制度、预警机制及应急预案', 'gjc': '制度', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未配备有资质的专（兼）职消防管理人员', 'gjc': '管理人员', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未保持安全出口、疏散通道、消防车通道畅通，应急照明，安全疏散标志标识缺失，未保证常闭式消防门处于关闭状态。', 'gjc': '消防安全', 'sfjyypfjq': '是', 'fxfz': '4' },
        { 'fxpg': '未定期组织对电器产品（电弧预警设备）及其线路、管路进行维护保养和检测，未及时整改电气火灾隐患。', 'gjc': '保养、检测', 'sfjyypfjq': '是', 'fxfz': '3' },
        { 'fxpg': '燃气安全不符合国家相关规定，未设置专业的可燃气体报警装置及周围有可燃物和杂物堆放。', 'gjc': '国家规定', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '存在电瓶、汽车违规充电，乱停放现象。', 'gjc': '违规充电', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未设置禁烟标识（最新版），公共场所未严禁吸烟。', 'gjc': '禁烟', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未配备足够的灭火器，有检查记录卡，每月定期检查', 'gjc': '灭火器 检查', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '未配备消火栓、消防水枪水带', 'gjc': '消防', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '未设置无障碍楼梯、通道等无障碍设施', 'gjc': '无障碍设施', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '未每年至少开展一次员工安全教育培训活动', 'gjc': '安全教育培训', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '工作人员未熟悉消防设施设备使用方法', 'gjc': '使用方法', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '全年内发生1次以上安全责任事故', 'gjc': '安全事故', 'sfjyypfjq': '是', 'fxfz': '2' }
      ],
      sssbList: [
        { 'fxpg': '未对殡葬设施设备进行检查并记录', 'gjc': '检查', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未安装双向视频传输系统，并未能与市正常对接', 'gjc': '视频系统', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未在墓区内安装高清监控系统，监控全覆盖、无死角，且能正常使用', 'gjc': '监控系统', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未安装人流车流计数系统，对园内人流、车流实时监测', 'gjc': '计数系统', 'sfjyypfjq': '是', 'fxfz': '2' },
        { 'fxpg': '未设置园区内导向标志', 'gjc': '导向标志', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '园区内和寄存室未设置承载力标识', 'gjc': '承载力', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '施工区域未设置警示标志', 'gjc': '警示标志', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '河道、景观处未设置警示标志', 'gjc': '警示标志', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '未设有应急照明', 'gjc': '应急照明', 'sfjyypfjq': '是', 'fxfz': '1' },
        { 'fxpg': '未设有烟雾感应器', 'gjc': '烟雾感应器', 'sfjyypfjq': '是', 'fxfz': '1' }
      ],
      yhbzList: [
        { 'fxpg': '未禁止在公墓内燃烧锡箔、冥币、纸钱、纸扎等迷信用品', 'gjc': '禁燃', 'sfjyypfjq': '是', 'fxfz': '4' },
        { 'fxpg': '未禁止在公墓内燃放烟花爆竹', 'gjc': '禁燃', 'sfjyypfjq': '是', 'fxfz': '4' },
        { 'fxpg': '未与办理殡葬业务的市民签订《禁止燃放烟花爆竹协议书》', 'gjc': '签订协议', 'sfjyypfjq': '是', 'fxfz': '4' },
        { 'fxpg': '未设置禁燃烟花爆竹标识标语', 'gjc': '禁燃烟花爆竹', 'sfjyypfjq': '是', 'fxfz': '2' }
      ]
    }
  },
  mounted () {
    this.dataList = standardViewData
  },
  methods: {
    toggleJgdDetailView (index) {
      this.isActive = index
    }

  }
}
</script>
<style lang="scss" scoped>
.active {
  background: url("../../../assets/img/modal/001.png") no-repeat!important;
  background-size: 100% 100%!important;
  height: 6.35rem!important;
}
.tab_ul li {
  background: url("../../../assets/img/modal/006.png") no-repeat;
  background-size: 100% 100%;
  height: 5.625rem;
  padding: .4rem 0;
  color: white;
  box-sizing: border-box;
  margin: 0 2rem;
}
ul.tb_list li {
  text-align: left;
  margin: 1rem 0 1rem 2rem;
}
ul.evenbg {
  background-color: #0c1e51;
  background-position: 100% 100%;
}

.bg_serial_num {
  border: 1px dashed;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 0.4rem;
  background-color: #2462cb;
}
.superviseList {
  overflow-x: hidden;
  overflow-y: scroll;
}

.superviseList::-webkit-scrollbar {
  width: 0;
}

.superviseClose {
  position: absolute;
  right: 3rem;
  top: 2.5rem;
}
</style>
